<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--第03课 30:17-->
    <body>
        <div id="app">

        </div>
        <script type="text/javascript" src="./vue.js"></script>
        <script type="text/javascript">
            //全局组件
            //第一个参数是组件的名字，第二个参数是options
            //1.Parent 2.Child

            //父 ===》子
            //1.先给父组件中绑定自定义的属性
            //2.在子组件中使用props接收父组件传递的数据
            //3.可以在子组件任意使用
            Vue.component('Parent',{
                data(){
                  return{
                      msg:"我是父组件的数据"
                  }
                },
                template:'' +
                    '<div>' +
                    '<p>我是一个父组件</p>' +
                    '<Child :childData="msg"/>' +
                    '</div>'
            });
            Vue.component('Child',{
                template:'' +
                    '<div>' +
                        '<p>我是一个子组件</p>' +
                        '<input type="text" v-model = "childData" />' +
                    '</div>',
                props:['childData']
            });

            //1.声子
            var App = {
                template: '' +
                    '<div> ' +
                    '<Parent/>' +
                    '</div>',
                components: {

                }

            };

            new Vue({
                el: '#app',
                data() {
                    return {}
                },
                components: {
                    App
                },
                template: '<App/>'

            });
        </script>
    </body>
</html>
